<template>
  <transition name="fade">
    <div
      v-show="visible"
      class="post-fab"
      @click="goToCreatePost"
    >
      <el-icon size="28">
        <Edit />
      </el-icon>
      <span class="fab-text">发布</span>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: true
  }
})

const router = useRouter()
const userStore = useUserStore()
const visible = ref(false)

// 跳转到发布帖子页面
const goToCreatePost = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再发布帖子')
    router.push('/login')
    return
  }
  router.push('/post/create')
}

onMounted(() => {
  // 延迟显示，避免页面加载时突兀出现
  setTimeout(() => {
    visible.value = props.show
  }, 500)
})
</script>

<style scoped>
.post-fab {
  position: fixed;
  right: 30px;
  bottom: 100px;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 8px 24px rgba(102, 126, 234, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  color: white;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.post-fab:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 
    0 16px 40px rgba(102, 126, 234, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.post-fab:active {
  transform: translateY(-3px) scale(1.05);
}

.fab-text {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(30px) scale(0.7);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-fab {
    right: 20px;
    bottom: 80px;
    width: 60px;
    height: 60px;
  }
  
  .fab-text {
    font-size: 10px;
  }
}

/* 为避免与回到顶部按钮冲突的间距调整 */
@media (min-width: 769px) {
  .post-fab {
    bottom: 100px;
  }
}
</style>